<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">楼宇：</span>
        <el-select
          v-model="params.builde_id"
          multiple
          size="mini"
          class="large-select"
          collapse-tags
          clearable
          placeholder="请选择楼宇">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <template slot="default">
              <label class="el-checkbox is-checked">
                <span class="el-checkbox__input " :class="{'is-checked' : params.builde_id.indexOf(item.value) > -1}">
                  <span class="el-checkbox__inner"></span>
                </span>
                <span class="el-checkbox__label">{{item.label}}</span>
              </label>
            </template>
          </el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">时间类型：</span>
        <el-select size="mini" v-model="params.time_type" placeholder="请选择时间类型" @change="changeTimeType">
          <el-option v-for="item in timeTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          :type="params.time_type===1?'month':'year'"
          :value-format="params.time_type===1?'yyyy-MM':'yyyy'"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          :type="params.time_type===1?'month':'year'"
          :value-format="params.time_type===1?'yyyy-MM':'yyyy'"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">统计类型：</span>
        <el-select size="mini" v-model="params.chart_type" placeholder="请选择统计类型">
          <el-option v-for="item in chartTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型">
          <el-option v-for="item in graphicsTypes" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBuildeChartEnergy" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart more-search" :chart-type="graphicsType" size="big" :data="chart" v-if="!loading"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
const typeMap = {
  1: '水',
  2: '电',
  3: '气'
}
export default {
  name: 'EnergyChartBuilding',
  props: ['type'],
  data () {
    return {
      loading: true,
      params: {
        page: 1,
        builde_id: [],
        time_type: null,
        start_time: null,
        end_time: null,
        type: this.type,
        chart_type: null
      },
      graphicsType: 'line',
      buildingList: [],
      timeTypeList: [
        {
          text: '月份',
          value: 1
        },
        {
          text: '年份',
          value: 2
        }
      ],
      chartTypeList: [
        {
          text: '总' + typeMap[this.type] + '量',
          value: 1
        },
        {
          text: '建筑面积用' + typeMap[this.type] + '量',
          value: 2
        }
      ],
      graphicsTypes: [
        {
          text: '柱状图',
          value: 'bar'
        },
        {
          text: '折线图',
          value: 'line'
        }
      ],
      data: [],
      chart: {
        name: '楼宇用' + typeMap[this.type] + '分析',
        xAxis: [{ data: [] }],
        series: [],
        legend: []
      }
    }
  },
  components: {
    CommonChart
  },
  created () {
    this.getBuildeEnergy()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    changeTimeType () {
      this.params.start_time = null
      this.params.end_time = null
    },
    async getBuildeChartEnergy () {
      if (!this.params.builde_id.length) {
        this.$message.warning('请选择楼宇')
        return
      }
      if (!this.params.time_type) {
        this.$message.warning('请选择时间类型')
        return
      }
      if (!this.params.start_time) {
        this.$message.warning('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.warning('请选择结束时间')
        return
      }
      if (!this.params.chart_type) {
        this.$message.warning('请选择统计类型')
        return
      }
      const params = {
        builde_id: this.params.builde_id.join(','),
        time_type: this.params.time_type,
        start_time: this.params.start_time,
        end_time: this.params.end_time,
        type: this.params.type,
        chart_type: this.params.chart_type
      }
      const res = await portal.getBuildeChartEnergy(params)
      if (res.data) {
        this.loading = true
        setTimeout(() => {
          const records = res.data
          const xAxisData = []
          records.forEach((e, index) => {
            if (!index) {
              for (const c in e) {
                if (c.indexOf('20') === 0) {
                  xAxisData.push(c)
                }
              }
            }
          })
          xAxisData.sort()
          const series = []
          const legend = []
          records.forEach(item => {
            legend.push(item.builde_name)
            series.push(
              {
                type: 'line',
                name: item.builde_name,
                label: {
                  show: true,
                  position: 'top',
                  textStyle: { color: '#fff' }
                },
                data: xAxisData.map(key => item[key])
              }
            )
          })
          this.chart.series = series
          this.chart.legend = legend
          this.chart.xAxis = [
            { data: xAxisData }
          ]
          this.loading = false
        })
      }
    },
    // 获取楼宇
    async getBuildeEnergy () {
      const result = await portal.getBuildeEnergy()
      if (result.data) {
        result.data.forEach(e => {
          e.value = e.builde_id
          e.label = e.builde_name
          e.check = false
        })
        this.buildingList = result.data
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
